<template>
  <div>
    <form @submit.prevent="login">
      <!-- .trim 去除首尾空白字符  
           .lazy 在change时触发而非input时
       -->
      <input type="text" name="username" v-model.trim.lazy="form.username" />
      <!-- .number 转数字，以parseFloat转成数字类型 -->
      <input
        type="text"
        name="password"
        v-model.number.trim="form.password"
        value="345"
      />
      <input type="text" :value="msg" @input="change" />
 

      <button>提交按钮</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg:'鬼天气太冷了！',
      form: {
        username: '',
        password: '',
        flag: false,
      },
    }
  },

  methods: {
    login() {
      console.log(this.form.username)
      console.log(this.form.password)
    },
    
    change(e){
       console.log(e.target.value);
        this.msg = e.target.value
    }

    }
}

</script>

<style scoped></style>
